import Uploader from "../component/other/Uploader.js";
import Track from "../component/route/Track.js";
import Position from "../component/route/Position.js";
import Selector from "../component/other/Selector.js";
import Vehicle from "../component/location/Vehicle.js";
import Measure from "../component/other/Measure.js";
import Route from "../component/route/Route.js";
import DeviceEdit from "../component/shanxi/DeviceEdit.js"
import DeviceRender from "../component/shanxi/DeviceRender.js"
import Valkyrja from "./Valkyrja.js";

class KJ236 extends Valkyrja {
    constructor() {
        super();
        this.meta_version = this.utils.getUrlParamer('meta_version')
        this.meta_id = this.utils.getUrlParamer('meta_id')
        this.init().then(() => {
            const edit = this.utils.getLocalStorage("edit");
            let mode = this.utils.getLocalStorage("mode");
            this.header(mode, edit);

            if (edit) {
                new Uploader();
                new Selector();
                new Track();
                new Position();
                new Route();
                new DeviceEdit();
                // 修改Uploader提示信息
                this.$$("#upload-name-text").html("图纸版本");
                this.$$("#upload-code-text").html("图纸类型");
                this.$$("#upload-mine-code").val(mode);
            } else {
                this.timer();
                const route = this.utils.getLocalStorage("route");
                if (mode === "person") {
                    new Selector();
                    new DeviceRender();
                    // new Measure();
                } else {
                    if (route) {
                        new Route();
                        new Vehicle();
                    } else {
                        new Vehicle();
                        new Selector();
                        new Measure();
                    }
                }
            }

            console.log("Walküre Fly...");
        });
    }

    header(mode, edit) {
        if (edit) {
            // 在编辑模式下需要添加操作header
            const div = `
                <header id="vp-header" style="background-color: rgba(0, 0, 0, 0);">
                    <div id="upload-popup">
                        <span style="height: 40px;line-height: 40px">更新图纸</span>
                    </div>
                </header>
            `;
            // 在article前添加header
            this.$$("#article").append(div);
            this.$$("#upload-mine-code").attr("readonly", "readonly");
        } else {
            if (mode === "person") {
                const div = `
                    <div id="vp-header">
                        <div class="flex-container">
                            <div id="station-select">
                                <span style="height: 40px;line-height: 40px">图层</span>
                                <i class="fas fa-chevron-up" style="margin-left: 8px"></i>
                            </div>
                            <div class="search-container">
                                <div class="item-inner">
                                    <div class="item-input-wrap">
                                      <input id="new-search" type="text" placeholder="搜索人员或设备">
                                    </div>
                                    <div class="item-media" style="margin: 0 6px">
                                        <i class="fas fa-search"></i>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                `;
                this.$$("#article").append(div);
                this.$$("#vehicle-locked-unlocked").hide();
            }
        }
    }

    timer() {
        // 点击下载新图纸
        this.$$("#get-tree-maps").on("click", async () => {
            const metas = await this.api.getMetas(this.meta_id);
            const metaDatas = this.sortMetaByUpdateTime(metas.data)
            if (metas.code === 0 && metas.data.length > 0) {
                await this.update(metaDatas[0]);
            }
        });

        // 点击下载备份数据
        this.$$("#data-dump").on("click", async () => {
            await this.api.dump();
        });

        // 一分钟判断一次是否版本有更新
        setInterval(async () => {
            // 判断 url中是否传入过 meta_version这个参数.
            // 传了 就不再去定时更新图纸。没传 就正常做更新判断
            if (!this.meta_version) {
                const config = this.algo.getConfig();
                if (config === null) return;
                // 获取config的方式要修改下
                const srcVer = config.mine_name;
                // 这里传入的 mode改成 从url获取
                const metas = await this.api.getMetas(this.meta_id);
                const metaDatas = this.sortMetaByUpdateTime(metas.data)
                if (metaDatas.length > 0) {
                    const cmpVer = metaDatas[0].mine_name;
                    if (srcVer !== cmpVer) {
                        this.$$("#get-tree-maps").show();
                    }
                }
            }

        }, 60000);
    }

    async update(meta, meta_version = '') {
        const meta_id = meta.meta_id;
        this.app.dialog.preloader("正在获取矿图...");
        const data = await this.api.getVector(meta_id, meta_version);
        if (data.code === 0) {
            const metajson = data.data.meta_json[0].geojson
            const json = JSON.parse(metajson)
            this.drawer.tiny(json)
            this.app.dialog.close()
            this.db.init(data.data)
        }
    }

    // 全局初始化
    async init() {
        // 将更新按钮隐藏
        this.$$("#get-tree-maps").hide();
        this.$$("#vehicle-locked-unlocked").hide();
        this.utils.setLocalStorage("theme", false);

        // 获取配置用的code信息
        const code = await this.api.getCode();
        this.utils.setLocalStorage('code', code.data);

        // 从参数中获取模式: person - 人员定位, vehicle - 车辆定位
        let mode = this.utils.getUrlParamer("mode"), loading = false;

        if (mode === "embed" || mode === "vehicle") {
            this.utils.setLocalStorage("theme", true);
            this.utils.setLocalStorage("themes", this.CONF.THEME);
            this.$$(".ol-viewport").css("background", this.CONF.BACKGROUND);
            mode = "vehicle";
        } else {
            this.utils.setLocalStorage("theme", true);
            this.utils.setLocalStorage("themes", this.CONF.THEME);
            this.$$(".ol-viewport").css("background", this.CONF.BACKGROUND);
            mode = "person";
        }

        // 如果原来已经设置过模式,则需要和本地进行比较,如果不同则需要重新获取数据
        const localMode = this.utils.getLocalStorage("mode");
        if (localMode !== null && localMode !== mode) {
            loading = true;
        }
        this.utils.setLocalStorage("mode", mode);

        // 从参数中获取是否为编辑模式
        let edit = this.utils.getUrlParamer("edit");
        if (edit === null || edit !== "true") {
            this.utils.setLocalStorage("edit", false);
        } else {
            this.utils.setLocalStorage("edit", true);
        }

        // 从参数中获取是否为Route模式
        let route = this.utils.getUrlParamer("route");
        if (route === null || !route) {
            this.utils.setLocalStorage("route", false);
        } else {
            this.utils.setLocalStorage("route", true);
        }
        const meta_id = this.utils.getUrlParamer('meta_id')
            const metas = await this.api.getMetas(meta_id);
            const metaDatas = this.sortMetaByUpdateTime(metas.data)
            if (metas.code === 0 && metas.data.length > 0) {
                if (!this.meta_version) {
                    await this.update(metaDatas[0]);
                } else {
                    // 否则就 渲染指定版本的图纸
                    const version_meta = metaDatas.find((meta) => {
                        return meta.mine_name == this.meta_version
                    })

                    await this.update(version_meta, version_meta.mine_name);
                }

            }
            // 否则就提示 用户还没有上传图纸
            else {
                this.toast('当前账号还没有上传图纸，请先上传图纸')
            }
    }

    // 将图纸信息按照 update_time来进行排序。
    sortMetaByUpdateTime(metas) {
        metas.forEach((meta) => {
            meta.transformedUpdateTime = new Date(meta.update_time);
        })
        metas.sort((a, b) => {
            return b.transformedUpdateTime - a.transformedUpdateTime
        })
        return metas
    }
}

new KJ236();